<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search">
      <el-input v-model="searchValue" placeholder="请输入查找的分包商" clearable :prefix-icon="Search" />

      <el-button type="primary" @click="addComp" class="btn">
        <el-icon color="#fff" class="icon"><Plus /></el-icon>
      </el-button>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table :data="comps" border stripe>
        <el-table-column
          v-for="col in columns"
          :prop="col.prop"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          align="center">
        </el-table-column>
        <el-table-column fixed="right" width="70" label="操作" align="center">
          <template #default="scoped">
            <el-button-group>
              <el-button
                type="primary"
                size="small"
                link
                @click="$router.push({ name: 'comp.edit', params: { id: scoped.row.id } })">
                <FileEditingOne theme="outline" size="16" fill="#555" />
              </el-button>
              <!-- 删除按钮 -->
              <el-button type="primary" size="small" link @click="delComp(scoped.row)">
                <Delete theme="outline" size="16" fill="#E74C3C" />
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <compDialog :visiable="visiable" @close="close" />
</template>

<script lang="ts" setup>
import useComp from '@renderer/composables/useComp'
import { Delete, FileEditingOne } from '@icon-park/vue-next'
import { Search, Plus } from '@element-plus/icons-vue'
import compDialog from '../../components/compDialog.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const visiable = ref(false)
const searchValue = ref('')

const { add, all, del, comps } = useComp()
const columns = [
  { id: 1, prop: 'name', label: '名称', width: '220' },
  { id: 2, prop: 'shortName', label: '简称', width: '95' },
  { id: 3, prop: 'fr', label: '法人', width: '' },
  { id: 4, prop: 'sjfzr', label: '负责人', width: '' },
]
const addComp = () => {
  visiable.value = true
}
const close = async () => {
  await all()
  visiable.value = false
}

const delComp = async (data: compModel) => {
  await ElMessageBox.confirm(`是否删除${data.shortName}的记录`, '警告!', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await del(data.id)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
  await all()
}

all()
</script>

<style lang="scss" scoped>
.search {
  @apply flex mb-2;
  .btn {
    @apply ml-2;
  }
}
</style>
